<template>
  <div class="box">
    <h1>我是小组件，是VueComponent1类的实例</h1>
    <h1>{{time|timeFormat}}</h1>
    <MyTodo></MyTodo>
  </div>
</template>

<script>
//引入moment:大多数插件都是默认暴露
import moment from "moment";

//Vue框架提供这样格式化功能:过滤器
export default {
  data() {
    return { time: Date.now() };
  },


  //局部过滤器:在那个组件定义的，在那个组件使用！！！！

  filters: {
    // 定义一个过滤器
    //当模板中使用过滤器的时候，底部函数会执行一次
    //过滤器函数需要有返回值,返回值即为格式化结果

    timeFormat(params) {
       //第一个参数:需要格式化数据，就是管道前面的表达式存储数值！！！
      return moment(params).format("YYYY-MM-DD");
    },
  },
};
</script>

<style>
.box {
  width: 600px;
  height: 200px;
  background: pink;
  margin-top: 50px;
}
</style>